<template>
    <div>
        <section class="content-header">
            安全管理&nbsp;/&nbsp;安全隐患排查&nbsp;/&nbsp;发现隐患
        </section>
        <section class="clearfix" style="margin-top:50px;">
            <div class="col-md-12">
                <form class="form-horizontal">
                    <div class="col-md-4">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">排查时间：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" disabled="disabled" v-model="addSafeData.time1">
                                </div>
                            </div>
                            <div class="form-group clearfix">
                                <label class="col-sm-4 control-label">系统：</label>
                                <div class="col-sm-8">
                                    <select class="form-control select2" style="width: 100%;" v-model="addSafeData.systemId">
                                        <option value="" disabled selected style='display:none;'>请选择</option>
                                        <option v-for="lst in sysList" :value="lst.value" :key="lst.value">{{lst.name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" v-if="addSafeData.systemId=='S' ||addSafeData.systemId==''">
                                <label class="col-sm-4 control-label">片区：</label>
                                <div class="col-sm-8">
                                    <select class="form-control select2" style="width: 100%;" v-model="addSafeData.areaId">
                                        <option value="" disabled selected style='display:none;'>请选择</option>
                                        <option v-for="lst in AreaList" :value="lst.areaId" :key="lst.value">{{lst.areaName}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" v-if="addSafeData.systemId!='PROJECT'">
                                <label class="col-sm-4 control-label">点位：</label>
                                <div class="col-sm-8">
                                    <select class="form-control select2" style="width: 100%;" v-model="addSafeData.siteId">
                                        <option value="" disabled selected style='display:none;'>请选择</option>
                                        <option v-for="lst in siteList" :value="lst.siteId" :key="lst.value">{{lst.siteName}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" v-if="addSafeData.systemId=='PROJECT'">
                                <label class="col-sm-4 control-label">工程名称：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" v-model="addSafeData.project" placeholder="请输入工程名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">部门：</label>
                                <div class="col-sm-8">
                                    <select class="form-control select2" style="width: 100%;" v-model="addSafeData.deptId" @change="changeDept($event)">
                                        <option value="" disabled selected style='display:none;'>请选择</option>
                                        <option v-for="lst in deptList" :value="lst.deptId" :key="lst.value">{{lst.deptName}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">部门负责人：</label>
                                <div class="col-sm-8">
                                    <select class="form-control select2" style="width: 100%;" v-model="addSafeData.deptpersonId">
                                        <option value="" disabled selected style='display:none;'>请选择</option>
                                        <option v-for="lst in deptpeopleList" :value="lst.value" :key="lst.value">{{lst.name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">安全员：</label>
                                <div class="col-sm-8">
                                    <select class="form-control select2" style="width: 100%;" v-model="addSafeData.personId">
                                        <option value="" disabled selected style='display:none;'>请选择</option>
                                        <option v-for="lst in safepeopleList" :value="lst.value" :key="lst.value">{{lst.name}}</option>
                                    </select>
                                </div>
                            </div>
                            <!-- <safe-person v-model="addSafeData.personId" :areaId="addSafeData.areaId" /> -->
                            <div class="form-group">
                                <label class="col-sm-4 control-label">处理时限：</label>
                                <div class="col-sm-2">
                                    <input type="email" class="form-control" id="inputEmail3" v-model="addSafeData.timelimit">
                                </div>
                                <div class="col-sm-1">
                                    <label class="col-sm-12 control-label" style="float:left">天</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 error">
                        <!-- <div class="box-body">
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.orderName && !form.orderName) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入事件名称</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.orderType && !form.orderType) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件类别</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.orderLevel && !form.orderLevel) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件等级</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.orderReason && !form.orderReason) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件原因</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.orderOrigin && !form.orderOrigin) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件来源</span>
                            </div>

                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.contacts && !form.contacts) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入联系人姓名</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.orderPhone && !/^[1][3,4,5,7,8][0-9]{9}$/.test(this.form.orderPhone)) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入联系电话</span>
                            </div>
                            <div class="form-group" style="height:34px">
                                <span class="error"></span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.orderPipeid && !form.orderPipeid) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件管线</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.orderDept && !form.orderDept) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择责任部门</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.orderArea && !form.orderArea ) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件片区</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.personId && !form.personId ) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择责任人</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.orderTimelimit && !form.orderTimelimit) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择处理时限</span>
                            </div>
                        </div> -->
                    </div>
                    <div class="col-md-6">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">检查项目：</label>
                                <div class="col-sm-6">
                                    <select class="form-control select2" style="width: 100%;" v-model="addSafeData.safeCheckcontent">
                                        <option value="" disabled selected style='display:none;'>请选择</option>
                                        <option v-for="lst in itemsList" :value="lst.value" :key="lst.value">{{lst.name}}</option>

                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">反映内容：</label>
                                <div class="col-sm-8">
                                    <textarea class="form-control" rows="5" placeholder="请输入反映内容" maxlength="80" v-model="addSafeData.reactcontent"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">上传照片：</label>
                                <div class="col-sm-10" :class="{hiddenIcon: fileList.length>2}">
                                    <el-upload :action="uploadUrl" :file-list="fileList" list-type="picture-card" :on-success='handleSuccess' :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">排查人：</label>

                                <div class="col-sm-5">
                                    <input type="email" class="form-control" id="inputEmail3" disabled="disabled" :value="getUserInfo().username">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-md-4"></div>
                        <div class="col-md-4" style="text-align: center">
                            <button type="button" class="btn btn-primary" style="margin-right:50px" @click="addSafe">提交</button>
                            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">取消</button>
                        </div>
                        <div class="col-md-4"></div>
                    </div>
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                                </div>
                                <div class="modal-body">
                                    <i class="fa fa-question-circle" aria-hidden="true"></i>
                                    <p>您编辑的内容尚未保存，确定取消申请吗？</p>
                                </div>
                                <div class="modal-footer">
                                    <router-link to="trouble">
                                        <button type="button" class="btn btn-block btn-info" data-dismiss="modal">确定</button>
                                    </router-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </div>
</template>

<script>
import { getUserInfo } from "@/utils/auth";
import utils from "@/utils/index"

import safeArea from "@/components/common/safe/safeArea.vue";
import safeItems from "@/components/common/safe/safeItems.vue";
import safeSite from "@/components/common/safe/safeSite.vue";
import safeLimites from "@/components/common/safe/safeLimites.vue";
import safeDept from "@/components/common/safe/safeDept.vue";
import safePerson from "@/components/common/safe/safePerson.vue";

export default {
    data() {
        return {
            nowTime: utils.getDate(),
            fileList: [],
            dialogImageUrl: "",
            dialogVisible: false,
            uploadUrl: `${window.apiPrefix}api/safe/uploadFile`,
            addSafeData: {
                time1: utils.getDate(),
                areaId: '',
                siteId: '',
                deptId: '',
                deptpersonId: '',
                personId: '',
                timelimit: '',
                photopath: '',
                reactcontent: '',
                dealpersonId: getUserInfo().personId,
                safeCheckcontent: '',
                systemId: '',
                project: ''
            },
            sysList: [],
            AreaList: [],
            siteList: [],
            deptList: [
                { deptId: 15, deptName: '安装分公司' },
                { deptId: 16, deptName: '工程管理部' },
                { deptId: 17, deptName: '思源供水' },
                { deptId: 33, deptName: '广源贸易' },
                { deptId: 37, deptName: '清源污水公司' },
                { deptId: 42, deptName: '净源污水公司' },
                { deptId: 46, deptName: '排水公司' },
            ],
            deptpeopleList: [],
            safepeopleList: [],
            itemsList: []
        }
    },
    components: {
        safeDept,
        safePerson,
        safeArea,
        safeItems,
        safeSite,
        safeLimites
    },
    mounted() {
        this.getSysList()
        this.getdeptpeople()
        this.getsafepeople()
        this.getItems()
    },
    watch: {
        fileList() {
            console.log(this.fileList);

            this.addSafeData.photopath = "";
            this.fileList.forEach(item => {
                this.addSafeData.photopath += `${item.response.data},`;
            });
            this.addSafeData.photopath = this.addSafeData.photopath.substr(
                0,
                this.addSafeData.photopath.length - 1
            );
        },
        'addSafeData.systemId'() {
            this.addSafeData.areaId = ''
            this.addSafeData.siteId = ''
            this.addSafeData.deptId = ''
            this.addSafeData.personId = ''
            this.addSafeData.project = ''
            if (this.addSafeData.systemId == 'S') {
                this.addSafeData.deptId = 17
                this.addSafeData.deptpersonId = 67
                this.addSafeData.personId = 82
                this.getSelArea()
            }
            if (this.addSafeData.systemId == 'W') {
                this.getSiteWs()
            }
            if (this.addSafeData.systemId == 'P') {
                this.getSitePs()
                this.addSafeData.deptId = 46
                this.addSafeData.deptpersonId = 180
                this.addSafeData.personId = 191
            }
            if (this.addSafeData.systemId == 'PROJECT') {
                this.addSafeData.deptId = 16
                this.addSafeData.deptpersonId = 42
                this.addSafeData.personId = 46
            }
        },
        'addSafeData.areaId'() {
            if (this.addSafeData.systemId == 'S') {
                this.getselSite()
            }
        },
        'addSafeData.siteId'() {
            if (this.addSafeData.systemId == 'W') {
                if (this.addSafeData.siteId == '32-WC-TZH') {
                    this.addSafeData.deptId = 37
                    this.addSafeData.deptpersonId = 162
                    this.addSafeData.personId = 166
                }
                if (this.addSafeData.siteId == '31-WC-CB') {
                    this.addSafeData.deptId = 42
                    this.addSafeData.deptpersonId = 143
                    this.addSafeData.personId = 149
                }
            }
        }
    },
    methods: {
        getUserInfo,
        changeDept(e){
            console.log(e.target.selectedIndex)
            this.addSafeData.deptpersonId=this.deptpeopleList[e.target.selectedIndex-1].value
            this.addSafeData.personId=this.safepeopleList[e.target.selectedIndex-1].value
        },
        handleRemove(file, fileList) {
            this.fileList = fileList;
            // console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(response, file, fileList) {
            this.fileList = fileList;
        },
        //系统列表
        getSysList() {
            this.$api.safe.sys().then(res => {
                if (res.success) {
                    this.sysList = res.data
                }
            });
        },
        //供水片区
        getSelArea(callback) {
            this.$api.safe.selArea().then(res => {
                if (res.success) {
                    this.AreaList = res.data
                }
            });
        },
        //供水点位
        getselSite() {
            this.$api.safe.selSite({
                areaId: this.addSafeData.areaId
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.siteList = res.data
                }
            });
        },
        // //供水部门
        // getDept() {
        //     this.$api.safe.selDept({
        //         areaId: this.addSafeData.areaId
        //     }).then(res => {
        //         if (res.success) {
        //             // console.log(res);
        //             this.deptList = res.data
        //         }
        //     });
        // },
        //排水点位
        getSitePs() {
            this.$api.safe.sitePs().then(res => {
                if (res.success) {
                    this.siteList = res.data
                }
            });
        },
        //污水点位
        getSiteWs() {
            this.$api.safe.siteWs().then(res => {
                if (res.success) {
                    this.siteList = res.data
                }
            });
        },
        //部门负责人
        getdeptpeople() {
            this.$api.safe.deptpeople().then(res => {
                if (res.success) {
                    this.deptpeopleList = res.data
                }
            });
        },
        //安全员
        getsafepeople() {
            this.$api.safe.safepeople().then(res => {
                if (res.success) {
                    this.safepeopleList = res.data
                }
            });
        },
        //检查项目
        getItems() {
            this.$api.safe.items().then(res => {
                if (res.success) {
                    // console.log(res);
                    this.itemsList = res.data
                }
            });
        },
        //添加隐患
        addSafe() {
            this.$api.safe.addSafe(this.addSafeData).then(res => {
                if (res.success) {
                    console.log(res);
                    // this.addSafeData = res.data
                    this.$$message({
                        message: "恭喜您，添加成功！",
                        type: "success"
                    });
                    this.$router.push({ path: "trouble" });
                }
            });
        },
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
input,
select,
textarea {
  border-radius: 5px;
}
.control-label {
  padding: 0 !important;
  line-height: 34px;
  text-align: right;
}
.hiddenIcon {
  .el-upload--picture-card {
    display: none;
  }
}
.modal-header {
  text-align: center;
  span {
    line-height: 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: white;
    margin-top: 10px;
    border-radius: 50%;
  }
}
.modal-body {
  padding: 20px 0;
  text-align: center;
  i {
    font-size: 40px;
    margin-bottom: 20px;
    color: #3c8dbc;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
.hiddenIcon {
  .el-upload--picture-card {
    display: none;
  }
}
input[type="file"] {
  display: none;
}
</style>